<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Special Carbon Calculator - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  <!-- 引入Bootstrap和jQuery的CDN链接 -->
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <!-- SF Pro 字体 -->
  <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
  <!-- Intersection Observer polyfill -->
  <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.js"></script>
  <!-- iOS设计CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <link rel="stylesheet" href="/css/index.css">
  <style>
    :root {
      /* 明亮模式颜色变量 */
      --text-color-light: #000;
      --text-color-dark: #fff;
      --bg-color-light: #f2f2f7;
      --bg-color-dark: #1c1c1e;
      --card-bg-light: #fff;
      --card-bg-dark: #2c2c2e;
      --input-bg-light: #fff;
      --input-bg-dark: #3a3a3c;
      --border-color-light: #d1d1d6;
      --border-color-dark: #38383a;
      --muted-text-light: #8e8e93;
      --muted-text-dark: #aeaeb2;
      --alert-bg-light: #d1ecf1;
      --alert-bg-dark: rgba(59, 130, 246, 0.2);
      --alert-text-light: #0c5460;
      --alert-text-dark: #fff;
      
      /* 特殊计算器的颜色 */
      --spec-gradient-start: #AF52DE;
      --spec-gradient-end: #FF2D55;
      --spec-gradient-start-dark: #9F42CE;
      --spec-gradient-end-dark: #E71E45;
    }
    
    body {
      transition: background-color 0.3s ease, color 0.3s ease;
      background-color: var(--bg-color-light);
      color: var(--text-color-light);
    }

    /* 暗色模式样式 */
    body.dark-theme,
    body.auto-theme.dark-mode {
      background-color: var(--bg-color-dark);
      color: var(--text-color-dark);
    }

    /* 确保暗色模式下所有文本可见 */
    body.dark-theme label,
    body.auto-theme.dark-mode label,
    body.dark-theme h1, 
    body.dark-theme h2, 
    body.dark-theme h3,
    body.dark-theme h4,
    body.dark-theme h5,
    body.auto-theme.dark-mode h1,
    body.auto-theme.dark-mode h2,
    body.auto-theme.dark-mode h3,
    body.auto-theme.dark-mode h4,
    body.auto-theme.dark-mode h5,
    body.dark-theme p,
    body.auto-theme.dark-mode p {
      color: var(--text-color-dark);
    }
    
    .calculator-header {
      background: linear-gradient(135deg, var(--spec-gradient-start), var(--spec-gradient-end));
      color: white;
      padding: 120px 0 60px;
      text-align: center;
      border-radius: 0 0 24px 24px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }
    
    /* 头部闪光效果 */
    .calculator-header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
      transform: rotate(30deg);
      animation: shimmer 15s infinite linear;
      pointer-events: none;
    }
    
    @keyframes shimmer {
      0% { transform: translateX(-50%) rotate(0deg); }
      100% { transform: translateX(0%) rotate(360deg); }
    }
    
    body.dark-theme .calculator-header,
    body.auto-theme.dark-mode .calculator-header {
      background: linear-gradient(135deg, var(--spec-gradient-start-dark), var(--spec-gradient-end-dark));
    }
    
    .calculator-header h1 {
      font-weight: 700;
      margin-bottom: 16px;
      color: white;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      animation: fadeInDown 1s ease;
    }
    
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .calculator-header p {
      opacity: 0;
      max-width: 700px;
      margin: 0 auto;
      font-size: 1.1rem;
      animation: fadeInUp 1s ease forwards;
      animation-delay: 0.3s;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 0.9;
        transform: translateY(0);
      }
    }
    
    .calculator-form {
      background: var(--card-bg-light);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      margin-bottom: 40px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      animation: slideInUp 0.8s ease;
    }
    
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    body.dark-theme .calculator-form,
    body.auto-theme.dark-mode .calculator-form {
      background-color: var(--card-bg-dark);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
    
    .form-title {
      font-weight: 700;
      margin-bottom: 24px;
      position: relative;
      padding-bottom: 12px;
      color: var(--text-color-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .form-title,
    body.auto-theme.dark-mode .form-title {
      color: var(--text-color-dark);
    }
    
    .form-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(to right, var(--spec-gradient-start), var(--spec-gradient-end));
      border-radius: 2px;
      transition: background 0.3s ease;
    }
    
    body.dark-theme .form-title::after,
    body.auto-theme.dark-mode .form-title::after {
      background: linear-gradient(to right, var(--spec-gradient-start-dark), var(--spec-gradient-end-dark));
    }
    
    .activity-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .activity-card {
      background: var(--card-bg-light);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      flex: 1;
      min-width: 220px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      text-align: center;
    }
    
    body.dark-theme .activity-card,
    body.auto-theme.dark-mode .activity-card {
      background-color: var(--card-bg-dark);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .activity-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    
    .activity-card.active {
      border-color: var(--spec-gradient-start);
      background: linear-gradient(to bottom right, rgba(175, 82, 222, 0.1), transparent);
    }
    
    body.dark-theme .activity-card.active,
    body.auto-theme.dark-mode .activity-card.active {
      border-color: var(--spec-gradient-start-dark);
      background: linear-gradient(to bottom right, rgba(175, 82, 222, 0.2), transparent);
    }
    
    .activity-icon {
      font-size: 2rem;
      margin-bottom: 12px;
      color: var(--spec-gradient-start);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .activity-icon,
    body.auto-theme.dark-mode .activity-icon {
      color: var(--spec-gradient-start-dark);
    }
    
    .activity-title {
      font-weight: 600;
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .activity-title,
    body.auto-theme.dark-mode .activity-title {
      color: var(--text-color-dark);
    }
    
    .form-group {
      margin-bottom: 24px;
      animation: fadeIn 0.5s ease;
      animation-fill-mode: both;
    }
    
    .form-group:nth-child(1) { animation-delay: 0.1s; }
    .form-group:nth-child(2) { animation-delay: 0.2s; }
    .form-group:nth-child(3) { animation-delay: 0.3s; }
    .form-group:nth-child(4) { animation-delay: 0.4s; }
    .form-group:nth-child(5) { animation-delay: 0.5s; }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .form-group label {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--ios-label);
      display: block;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .form-group label,
    body.auto-theme.dark-mode .form-group label {
      color: var(--text-color-dark);
    }
    
    /* iOS风格的选择器样式 */
    .form-control.ios-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-right: 30px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238E8E93' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
      background-repeat: no-repeat;
      background-position: calc(100% - 12px) center;
      background-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      border: 1px solid var(--border-color-light);
      font-weight: 500;
      padding: 12px 16px;
      height: auto;
    }
    
    .form-control.ios-select:hover {
      border-color: var(--ios-gray4);
      box-shadow: 0 4px 8px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }
    
    .form-control.ios-select:focus {
      border-color: var(--spec-gradient-start);
      box-shadow: 0 0 0 3px rgba(175, 82, 222, 0.25);
      outline: none;
    }
    
    /* 深色模式样式调整 */
    body.dark-theme .form-control.ios-select,
    body.auto-theme.dark-mode .form-control.ios-select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23AEAEB2' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
      border-color: var(--border-color-dark);
      background-color: var(--input-bg-dark);
      color: var(--text-color-dark);
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    
    body.dark-theme .form-control.ios-select:hover,
    body.auto-theme.dark-mode .form-control.ios-select:hover {
      border-color: var(--ios-gray3);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    body.dark-theme .form-control.ios-select:focus,
    body.auto-theme.dark-mode .form-control.ios-select:focus {
      border-color: var(--spec-gradient-start-dark);
      box-shadow: 0 0 0 3px rgba(175, 82, 222, 0.3);
    }
    
    /* 表单控件暗色模式 */
    body.dark-theme .form-control,
    body.auto-theme.dark-mode .form-control {
      background-color: var(--input-bg-dark);
      border-color: var(--border-color-dark);
      color: var(--text-color-dark);
    }
    
    body.dark-theme select.form-control option,
    body.auto-theme.dark-mode select.form-control option {
      background-color: var(--input-bg-dark);
      color: var(--text-color-dark);
    }
    
    /* 表单文本和提示信息 */
    body.dark-theme .form-text.text-muted,
    body.auto-theme.dark-mode .form-text.text-muted {
      color: var(--muted-text-dark) !important;
    }
    
    .file-upload {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px;
      border: 2px dashed var(--border-color-light);
      border-radius: 16px;
      background: rgba(242, 242, 247, 0.5);
      transition: all 0.3s ease;
      cursor: pointer;
      margin-bottom: 24px;
    }
    
    body.dark-theme .file-upload,
    body.auto-theme.dark-mode .file-upload {
      border-color: var(--border-color-dark);
      background: rgba(44, 44, 46, 0.5);
    }
    
    .file-upload:hover {
      border-color: var(--spec-gradient-start);
      background: rgba(175, 82, 222, 0.05);
    }
    
    body.dark-theme .file-upload:hover,
    body.auto-theme.dark-mode .file-upload:hover {
      border-color: var(--spec-gradient-start-dark);
      background: rgba(175, 82, 222, 0.1);
    }
    
    .file-upload-icon {
      font-size: 3rem;
      color: var(--spec-gradient-start);
      margin-bottom: 16px;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .file-upload-icon,
    body.auto-theme.dark-mode .file-upload-icon {
      color: var(--spec-gradient-start-dark);
    }
    
    .file-upload-text {
      font-weight: 600;
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }
    
    .file-upload-help {
      font-size: 0.9rem;
      color: var(--muted-text-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .file-upload-help,
    body.auto-theme.dark-mode .file-upload-help {
      color: var(--muted-text-dark);
    }
    
    .file-upload input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
    
    .preview-card {
      background: var(--card-bg-light);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      margin-bottom: 24px;
      text-align: center;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    body.dark-theme .preview-card,
    body.auto-theme.dark-mode .preview-card {
      background-color: var(--card-bg-dark);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    
    /* 预览卡片闪光效果 */
    .ios-shine-effect:after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);
      animation: shine 6s infinite linear;
      pointer-events: none;
    }
    
    @keyframes shine {
      from { transform: translateX(-100%) rotate(30deg); }
      to { transform: translateX(100%) rotate(30deg); }
    }
    
    body.dark-theme .ios-shine-effect:after,
    body.auto-theme.dark-mode .ios-shine-effect:after {
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
      );
    }
    
    .preview-title {
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--text-color-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .preview-title,
    body.auto-theme.dark-mode .preview-title {
      color: var(--text-color-dark);
    }
    
    .preview-value {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 8px;
      background: linear-gradient(135deg, var(--spec-gradient-start), var(--spec-gradient-end));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      transition: background 0.3s ease;
    }
    
    body.dark-theme .preview-value,
    body.auto-theme.dark-mode .preview-value {
      background: linear-gradient(135deg, var(--spec-gradient-start-dark), var(--spec-gradient-end-dark));
      -webkit-background-clip: text;
      background-clip: text;
    }
    
    .submit-btn {
      background: linear-gradient(135deg, var(--spec-gradient-start), var(--spec-gradient-end));
      color: white;
      border: none;
      border-radius: 12px;
      padding: 16px 24px;
      font-weight: 700;
      transition: all 0.3s ease;
      box-shadow: 0 6px 16px rgba(175, 82, 222, 0.2);
      width: 100%;
      font-size: 1.1rem;
      position: relative;
      overflow: hidden;
    }
    
    .submit-btn:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(175, 82, 222, 0.3);
    }
    
    .submit-btn:active {
      transform: translateY(0);
      box-shadow: 0 4px 10px rgba(175, 82, 222, 0.2);
    }
    
    /* 按钮点击波纹效果 */
    .submit-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      border-radius: 100%;
      transform: scale(1, 1) translate(-50%, -50%);
      transform-origin: 50% 50%;
    }
    
    .submit-btn:focus:not(:active)::after {
      animation: ripple 1s ease;
    }
    
    @keyframes ripple {
      0% {
        transform: scale(0, 0) translate(-50%, -50%);
        opacity: 0.5;
      }
      100% {
        transform: scale(30, 30) translate(-50%, -50%);
        opacity: 0;
      }
    }
    
    body.dark-theme .submit-btn,
    body.auto-theme.dark-mode .submit-btn {
      background: linear-gradient(135deg, var(--spec-gradient-start-dark), var(--spec-gradient-end-dark));
      box-shadow: 0 6px 16px rgba(175, 82, 222, 0.3);
    }
    
    body.dark-theme .submit-btn:hover,
    body.auto-theme.dark-mode .submit-btn:hover {
      box-shadow: 0 10px 20px rgba(175, 82, 222, 0.4);
    }
    
    .info-alert {
      background: rgba(52, 152, 219, 0.1);
      border-left: 4px solid var(--ios-blue);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    body.dark-theme .info-alert,
    body.auto-theme.dark-mode .info-alert {
      background: rgba(52, 152, 219, 0.15);
      border-left-color: #0A84FF;
    }
    
    .info-alert-title {
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--ios-blue);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .info-alert-title,
    body.auto-theme.dark-mode .info-alert-title {
      color: #0A84FF;
    }
    
    .selected-filename {
      font-weight: 600;
      color: var(--spec-gradient-start);
      margin-top: 8px;
      display: none;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .selected-filename,
    body.auto-theme.dark-mode .selected-filename {
      color: var(--spec-gradient-start-dark);
    }
    
    /* 提示按钮样式 */
    .help-button {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 48px;
      height: 48px;
      border-radius: 24px;
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      z-index: 999;
      transition: all 0.3s ease;
    }
    
    .help-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
    
    .help-button i {
      font-size: 24px;
    }
    
    /* 主题切换按钮 */
    .theme-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 48px;
      height: 48px;
      border-radius: 24px;
      background-color: #f2f2f7;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    body.dark-theme .theme-toggle,
    body.auto-theme.dark-mode .theme-toggle {
      background-color: #3a3a3c;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .theme-toggle i {
      font-size: 22px;
      color: #8e8e93;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .theme-toggle i,
    body.auto-theme.dark-mode .theme-toggle i {
      color: #fff;
    }
    
    /* 示例模态框样式 */
    .example-modal .modal-header {
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      color: white;
      border-bottom: none;
    }
    
    body.dark-theme .example-modal .modal-content,
    body.auto-theme.dark-mode .example-modal .modal-content {
      background-color: var(--card-bg-dark);
      border-color: var(--border-color-dark);
    }
    
    body.dark-theme .example-modal .modal-header,
    body.auto-theme.dark-mode .example-modal .modal-header {
      background: linear-gradient(135deg, #0A84FF, #5E5CE6);
    }
    
    body.dark-theme .example-modal .modal-footer,
    body.auto-theme.dark-mode .example-modal .modal-footer {
      border-color: var(--border-color-dark);
    }
    
    body.dark-theme .example-modal .btn-secondary,
    body.auto-theme.dark-mode .example-modal .btn-secondary {
      background-color: #3a3a3c;
      border-color: #3a3a3c;
      color: white;
    }
    
    .example-img {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      margin-bottom: 20px;
    }
    
    .example-img:hover {
      transform: scale(1.03);
    }
    
    body.dark-theme .example-img,
    body.auto-theme.dark-mode .example-img {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    
    .example-label {
      font-weight: 600;
      margin-top: 12px;
      margin-bottom: 8px;
      display: block;
      color: var(--text-color-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .example-label,
    body.auto-theme.dark-mode .example-label {
      color: var(--text-color-dark);
    }
    
    /* 成功模态框样式 */
    .success-modal .modal-header {
      background: linear-gradient(135deg, var(--spec-gradient-start), var(--spec-gradient-end));
      color: white;
      border-bottom: none;
    }
    
    body.dark-theme .success-modal .modal-header,
    body.auto-theme.dark-mode .success-modal .modal-header {
      background: linear-gradient(135deg, var(--spec-gradient-start-dark), var(--spec-gradient-end-dark));
    }
    
    .success-modal .modal-body {
      padding: 25px;
    }
    
    .success-modal .modal-footer {
      border-top: none;
      justify-content: center;
    }
    
    .success-icon {
      font-size: 48px;
      color: var(--spec-gradient-start);
      margin-bottom: 15px;
    }
    
    body.dark-theme .success-icon,
    body.auto-theme.dark-mode .success-icon {
      color: var(--spec-gradient-start-dark);
    }
    
    .points-value {
      font-size: 36px;
      font-weight: 700;
      color: var(--spec-gradient-start);
      margin: 15px 0;
    }
    
    body.dark-theme .points-value,
    body.auto-theme.dark-mode .points-value {
      color: var(--spec-gradient-start-dark);
    }
    
    body.dark-theme .success-modal .btn-success,
    body.auto-theme.dark-mode .success-modal .btn-success {
      background: linear-gradient(135deg, var(--spec-gradient-start-dark), var(--spec-gradient-end-dark));
      border: none;
    }
  </style>
</head>
<body class="auto-theme">
<!-- 导航栏容器，将由JavaScript加载 -->
<div id="navbar-container"></div>

<header class="calculator-header">
  <div class="container">
    <h1>Special Carbon Calculator</h1>
    <p>Track your household energy savings and recycling activities to earn carbon credits</p>
  </div>
</header>

<div class="container">
  <div class="calculator-form ios-depth-effect">
    <h2 class="form-title">Carbon Reduction Submission</h2>
    
    <form id="carbonForm" enctype="multipart/form-data">
      <div class="form-group">
        <label>Select Activity Category</label>
        <div class="activity-selector">
          <div class="activity-card active" data-category="住">
            <div class="activity-icon">
              <i class="fas fa-home"></i>
            </div>
            <div class="activity-title">Home Energy</div>
          </div>
    </div>
  </div>
      
      <div class="form-group">
        <label for="activity">Select Specific Activity</label>
        <select id="activity" class="form-control ios-select">
          <!-- Options will be populated by JavaScript -->
        </select>
      </div>
      
          <div class="form-group">
        <label for="dataInput">Activity Quantity</label>
        <input type="number" id="dataInput" class="form-control ios-select" step="0.01" placeholder="Enter your reduction amount">
        <small class="form-text text-muted">For electricity savings, enter the kilowatt-hour (kWh) saved. For water savings, enter liters saved.</small>
          </div>
      
          <div class="form-group">
        <label for="activityDate">Activity Date</label>
        <input type="date" id="activityDate" name="date" class="form-control ios-select" required>
        <small class="form-text text-muted">When did this activity take place? Cannot be a future date.</small>
        <script>document.getElementById('activityDate').valueAsDate = new Date();</script>
          </div>
      
      <div class="form-group">
        <label for="notes">Notes (Optional)</label>
        <textarea id="notes" name="notes" class="form-control ios-select" rows="3" placeholder="Add any additional information about your activity..."></textarea>
        <small class="form-text text-muted">Include any relevant details that might help in verifying your activity.</small>
      </div>
      
      <div class="file-upload">
        <div class="file-upload-icon">
          <i class="fas fa-file-image"></i>
        </div>
        <div class="file-upload-text">Upload Evidence</div>
        <div class="file-upload-help">Click or drag an image file here</div>
        <input type="file" id="imageUpload" name="image" accept="image/*">
        <div class="selected-filename" id="selectedFilename"></div>
      </div>
      
      <div class="preview-card ios-shine-effect">
        <div class="preview-title">Estimated Carbon Reduction</div>
        <div class="preview-value" id="carbonReductionPreview">0 kg CO₂</div>
        <p>This is an estimate based on your input. Final credits may vary after review.</p>
      </div>
      
      <button type="submit" class="submit-btn" id="submitBtn">
        <i class="fas fa-leaf mr-2"></i> Submit Activity
      </button>
    </form>
  </div>
  
  <div class="info-alert">
    <div class="info-alert-title">Important Information</div>
    <p>Please note the following guidelines for your submissions:</p>
    <ul>
      <li><strong>Recycling activities</strong> can be submitted once daily.</li>
      <li><strong>Electricity and water savings</strong> should be submitted monthly with meter readings as evidence.</li>
      <li>For household utilities, please include the <strong>number of family members</strong> in your submission.</li>
    </ul>
  </div>
  
  <h3 class="form-title">Examples</h3>
  <div class="row mb-5">
    <div class="col-md-6 mb-4">
      <span class="example-label">Activity Evidence Example</span>
      <img src="img/eg.png" class="img-fluid example-img" alt="Activity evidence example">
    </div>
    <div class="col-md-6 mb-4">
      <span class="example-label">Meter Reading Example</span>
      <img src="img/teg.png" class="img-fluid example-img" alt="Meter reading example">
    </div>
  </div>
</div>

<!-- 提示按钮 -->
<div class="help-button" id="helpButton">
  <i class="fas fa-question"></i>
</div>

<!-- 示例模态框 -->
<div class="modal fade example-modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Submission Guide</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <h5 class="example-label">Activity Evidence Example</h5>
            <img src="img/eg.png" class="img-fluid example-img" alt="Activity evidence example">
            <p>Example of how to document your eco-friendly activities. Provide clear evidence of the action taken.</p>
          </div>
          <div class="col-md-6">
            <h5 class="example-label">Meter Reading Example</h5>
            <img src="img/teg.png" class="img-fluid example-img" alt="Meter reading example">
            <p>For utility-related activities, a clear image of your meter readings before and after is required.</p>
          </div>
            </div>

        <div class="mt-4">
          <h5>Submission Tips</h5>
          <ul>
            <li>Be sure your photos clearly show the activity or meter readings</li>
            <li>For electricity savings, compare your current bill with previous month's</li>
            <li>For recycling, show sorted materials or recycling center receipts</li>
            <li>Include appropriate notes explaining your activity if needed</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- 成功提交模态框 -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content success-modal">
      <div class="modal-header">
        <h5 class="modal-title" id="successModalLabel">Submission Successful</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <div class="success-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <h4>Carbon Reduction Recorded!</h4>
        <div class="points-value"><span id="successPoints">0</span> points</div>
        <p>Your contribution has been recorded and added to the review queue. Thank you for making a difference!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Continue</button>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<div id="footer-placeholder"></div>

<script>
  $(document).ready(function () {
    var token = localStorage.getItem('token');
    if (!token) {
      showAlert('请先登录', 'warning', function() {
        window.location.href = 'index.html';
      });
      return;
    }
    
    // 初始化活动选择器和主题切换
    initPage();
    
    // 处理帮助按钮点击
    $('#helpButton').click(function() {
      $('#exampleModal').modal('show');
    });
    
    // 更新预览当输入改变时
    $('#dataInput, #activity').on('input change', calculateAndDisplayReduction);
    
    // 处理活动卡片选择
    $('.activity-card').click(function() {
      $('.activity-card').removeClass('active');
      $(this).addClass('active');
      updateActivityOptions($(this).data('category'));
      calculateAndDisplayReduction();
    });
    
    // 显示文件名当文件选择时
    $('#imageUpload').change(function() {
      if (this.files.length > 0) {
        $('#selectedFilename').text(this.files[0].name).show();
      } else {
        $('#selectedFilename').hide();
      }
    });
    
    // 处理表单提交
    $('#carbonForm').submit(function (e) {
      e.preventDefault();
      
      // 验证表单
      var activity = $('#activity').val();
      var dataInputValue = $('#dataInput').val();
      var dataInput = parseFloat(dataInputValue);
      var quantity = dataInput;
      var evidenceFile = $('#imageUpload').val();
      
      if (!activity) {
        showAlert('请选择一个活动', 'warning');
        return;
      }
      
      if (!quantity || isNaN(quantity) || quantity <= 0) {
        showAlert('请输入有效的数量', 'warning');
        return;
      }
      
      if (!evidenceFile) {
        showAlert('请上传活动证明', 'warning');
        return;
      }
      
      // 准备提交数据
      var uid = localStorage.getItem('id');
      var formData = new FormData(this);
      formData.append('activity', $('#activity').val());
      formData.append('oridata', $('#dataInput').val());
      formData.append('token', localStorage.getItem('token'));
      formData.append('id', uid);
      formData.append('date', $('#activityDate').val());
      formData.append('notes', $('#notes').val());
      
      // 显示加载状态
      var submitBtn = $(this).find('button[type="submit"]');
      var originalText = submitBtn.html();
      submitBtn.html('<i class="fas fa-spinner fa-spin mr-2"></i> Processing...');
      submitBtn.prop('disabled', true);
      
      $.ajax({
        type: 'POST',
        url: 'speccal.php',
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function (response) {
          // 恢复按钮状态
          submitBtn.html(originalText).prop('disabled', false);
          
          if (response.success) {
            // 显示成功模态框而不是内联提示
            $('#successPoints').text(response.points);
            $('#successModal').modal('show');
            
            // 重置表单
            $('#carbonForm')[0].reset();
            $('#selectedFilename').hide();
            $('#notes').val('');
            $('#activityDate').val(new Date().toISOString().split('T')[0]);
            calculateAndDisplayReduction();
            
            // 发送确认邮件
            sendEmail(localStorage.getItem('token'));
          } else {
            if (response.message === 'Invalid token') {
              showAlert('您的会话已过期，请重新登录', 'error', function() {
                window.location.href = 'index.html';
              });
            } else {
              showAlert('提交失败: ' + response.message, 'error');
            }
          }
        },
        error: function (xhr, status, error) {
          // 恢复按钮状态
          submitBtn.html(originalText).prop('disabled', false);
          
          var errorMsg = '提交失败，请稍后再试';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMsg += ': ' + xhr.responseJSON.message;
          }
          
          showAlert(errorMsg, 'error');
        }
      });
    });
  });
  
  // 初始化页面
  function initPage() {
    // 更新活动选项
    updateActivityOptions('住');
    calculateAndDisplayReduction();
    
    // 添加主题切换按钮
    addThemeToggle();
    
    // 初始化表单日期为今天
    document.getElementById('activityDate').valueAsDate = new Date();
    
    // 应用保存的主题
    applyTheme();
  }
  
  // 添加主题切换按钮
  function addThemeToggle() {
    const themeToggle = document.createElement('div');
    themeToggle.className = 'theme-toggle';
    themeToggle.id = 'themeToggle';
    themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
    document.body.appendChild(themeToggle);
    
    // 为主题切换按钮添加点击事件
    themeToggle.addEventListener('click', function() {
      const body = document.body;
      
      if (body.classList.contains('auto-theme')) {
        body.classList.remove('auto-theme');
        body.classList.remove('dark-mode');
        body.classList.add('dark-theme');
        localStorage.setItem('theme', 'dark-theme');
      } else if (body.classList.contains('dark-theme')) {
        body.classList.remove('dark-theme');
        body.classList.add('light-theme');
        localStorage.setItem('theme', 'light-theme');
      } else {
        body.classList.remove('light-theme');
        body.classList.add('auto-theme');
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          body.classList.add('dark-mode');
        }
        localStorage.setItem('theme', 'auto-theme');
      }
      updateThemeIcon(body.className);
    });
  }
  
  // 应用保存的主题
  function applyTheme() {
    const savedTheme = localStorage.getItem('theme');
    const body = document.body;
    
    if (savedTheme) {
      body.className = savedTheme;
      updateThemeIcon(savedTheme);
    } else {
      body.classList.add('auto-theme');
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        body.classList.add('dark-mode');
      }
      updateThemeIcon('auto-theme');
    }
    
    // 监听系统暗模式变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
      if (body.classList.contains('auto-theme')) {
        if (e.matches) {
          body.classList.add('dark-mode');
        } else {
          body.classList.remove('dark-mode');
        }
        updateThemeIcon('auto-theme');
      }
    });
  }
  
  // 更新主题图标
  function updateThemeIcon(theme) {
    const icon = document.querySelector('#themeToggle i');
    if (!icon) return;
    
    if (theme.includes('dark-theme')) {
      icon.className = 'fas fa-sun';
    } else if (theme.includes('light-theme')) {
      icon.className = 'fas fa-moon';
    } else {
      // 自动主题
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        icon.className = 'fas fa-sun';
      } else {
        icon.className = 'fas fa-moon';
      }
    }
  }

  function sendEmail(token) {
    fetch('stm.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'token=' + encodeURIComponent(token),
    })
      .then(response => response.json())
      .then(data => {
        if (!data.success) {
          console.error('Email sending failed:', data.message);
        }
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }

  function updateActivityOptions(category) {
    var options = {
      '住': [
        { value: '节约用电1度', text: 'Electricity Savings (1 kWh)' },
        { value: '节约用水1L', text: 'Water Conservation (1 L)' },
        { value: '垃圾分类1次', text: 'Recycling (1 instance)' }
      ]
    };
    
    var activitySelect = $('#activity');
    activitySelect.empty();
    
    if (options[category]) {
      options[category].forEach(function (option) {
        activitySelect.append($('<option>', { value: option.value, text: option.text }));
      });
    }
    
    // 为选择器添加iOS风格类
    activitySelect.addClass('ios-select');
  }

  function calculateAndDisplayReduction() {
    var activity = $('#activity').val();
    var dataInputValue = $('#dataInput').val();
    var dataInput = parseFloat(dataInputValue);
    
    if (isNaN(dataInput)) {
      $('#carbonReductionPreview').text('0 kg CO₂');
      return;
    }
    
    var carbonReduction = 0;
    
    // 根据活动类型计算碳减排量
    switch (activity) {
      case '节约用电1度':
        carbonReduction = dataInput * 0.785; // kgCO2 per kWh
        break;
      case '节约用水1L':
        carbonReduction = dataInput * 0.0023; // kgCO2 per liter
        break;
      case '垃圾分类1次':
        carbonReduction = dataInput * 0.5; // kgCO2 per instance
        break;
      default:
        carbonReduction = 0;
    }
    
    // 显示计算结果
    $('#carbonReductionPreview').text(carbonReduction.toFixed(2) + ' kg CO₂');
  }
</script>
</body>
</html>
